<template>
  <div>
    <el-breadcrumb
      separator-class="el-icon-arrow-right"
      class="breadcrumb-base"
      style="line-height: 30px;"
    >
      <el-breadcrumb-item>
        <!--:to="{ path: '/application' }"-->
        <i class="el-icon-star-off"></i>
        <span>我的收藏</span>
      </el-breadcrumb-item>
    </el-breadcrumb>

    <div class="main-container">
      <div class="filter">
        <div class="inner">
          <el-form ref="filterForm" :model="filterForm" @submit.native.prevent label-width="70px">
            <el-row>
              <el-row>
                <el-col :span="6">
                  <el-form-item label="病理编号">
                    <el-input
                      class="input-form"
                      size="mini"
                      v-model="filterForm.pathologyId"
                      clearable
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item>
                    <div class="expansion" @click="toggleExpansion">
                      <font-awesome-icon v-if="!showExpansion" :icon="['fas', 'angle-down']"></font-awesome-icon>
                      <font-awesome-icon v-else :icon="['fas', 'angle-up']"></font-awesome-icon>
                    </div>
                    <el-button
                      type="primary"
                      size="mini"
                      @click="search"
                      style="margin-left: 13px;"
                    >搜索</el-button>
                    <!--<el-button size="mini"-->
                    <!--:loading="downloadbuttonloading"-->
                    <!--@click="downloadhospitalapplicationExcel">-->
                    <!--导出表格-->
                    <!--</el-button>-->
                  </el-form-item>
                </el-col>
              </el-row>
              <div v-if="showExpansion">
                <el-row>
                  <el-col :span="6">
                    <el-form-item label="患者姓名">
                      <el-input class="input-form" size="mini" v-model="filterForm.name" clearable></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="取材脏器" prop="pathologyHaslet">
                      <el-select
                        size="mini"
                        clearable
                        v-model="filterForm.sampleOrganId"
                        placeholder="请选择取材脏器"
                        class="picker-form"
                      >
                        <el-option
                          v-for="item in organDict"
                          :key="item.dicCode"
                          :label="item.dicName"
                          :value="item.dicCode"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="送检医生">
                      <el-input
                        class="input-form"
                        size="mini"
                        v-model="filterForm.sendDoctor"
                        clearable
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="病区号">
                      <el-input
                        class="input-form"
                        size="mini"
                        v-model="filterForm.wardId"
                        clearable
                      ></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="6">
                    <el-form-item label="床位号">
                      <el-input class="input-form" size="mini" v-model="filterForm.bedId" clearable></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="取材部位">
                      <el-input
                        class="input-form"
                        size="mini"
                        v-model="filterForm.sampleBody"
                        clearable
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="联系电话">
                      <el-input
                        class="input-form"
                        size="mini"
                        v-model="filterForm.sendDoctorTel"
                        clearable
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="标本名称">
                      <el-input
                        class="input-form"
                        size="mini"
                        v-model="filterForm.specimenName"
                        clearable
                      ></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="6">
                    <el-form-item label="标本类别">
                      <el-select
                        v-model="filterForm.specimenType"
                        placeholder="请选择标本类别"
                        class="picker-form"
                        size="mini"
                        clearable
                      >
                        <el-option
                          v-for="data in specimenCategoryList"
                          :key="data.id"
                          :label="data.name"
                          :value="data.id"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="收藏备注">
                      <el-input
                        v-model="filterForm.remark"
                        placeholder="请输入收藏备注"
                        class="input-form"
                        size="mini"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
              </div>
            </el-row>
          </el-form>
        </div>
        <div class="application-list">
          <base-table
            ref="appAllTable"
            v-loading="loading"
            :data="appAllTable.data"
            :header="appAllTable.header"
            :operation="appAllTable.operation"
            :pageInfo="appAllTable.pageInfo"
            :selected="false"
            @handleClick="rolesTableButtonClick"
            @pageJumpTo="appAllTablePageJumpTo"
            @sizeChange="appAllTableSizeChange"
          ></base-table>
        </div>
      </div>
    </div>
    <el-dialog
      :close-on-click-modal="false"
      title="诊断详情"
      :visible.sync="normalDetailDialog.visible"
      width="80%"
    >
      <normal-detail
        ref="normalDetail"
        style="margin-top: 10px"
        :NormalDetailPathologyId="normalDetailDialog.pathologyId"
      ></normal-detail>
    </el-dialog>
  </div>
</template>

<script>
import BaseTable from '@templates/components/BaseTable';
import _ from 'lodash';
import { itemsPerPage } from '@/client/libs/util';
import NormalDetail from '@templates/components/NormalDetail';
export default {
  name: 'MyGroupCollections',
  components: {
    BaseTable,
    NormalDetail
  },
  data() {
    return {
      normalDetailDialog: {
        visible: false,
        pathologyId: ''
      },
      filterForm: {
        pathologyId: '',
        name: '',
        sampleOrganId: '',
        sendDoctor: '',
        wardId: '',
        bedId: '',
        sampleBody: '',
        sendDoctorTel: '',
        specimenName: '',
        specimenType: '',
        remark: '',
        page: null,
        size: itemsPerPage.get()
      },
      showExpansion: false,
      loading: true,
      appAllTable: {
        data: [],
        header: [
          {
            prop: 'pathologyId',
            label: '病理编号',
            width: 100
          },
          {
            prop: 'currentLevelLabel',
            label: '状态'
          },
          {
            prop: 'name',
            label: '患者姓名',
            width: 100
          },
          {
            prop: 'age',
            label: '年龄'
          },
          {
            prop: 'sexName',
            label: '性别'
          },
          {
            prop: 'cardId',
            label: '身份证号',
            width: 200
          },
          {
            prop: 'wardName',
            label: '病区名称',
            width: 100
          },
          {
            prop: 'bedId',
            label: '床位号'
          },
          {
            prop: 'sampleOrganName',
            label: '取材脏器',
            width: 100
          },
          {
            prop: 'sampleBody',
            label: '取材部位',
            width: 100
          },
          {
            label: '切片数',
            prop: 'biopsyCount'
          },
          {
            label: '送检医生',
            prop: 'sendDoctor',
            width: 100
          },
          // {
          //   label: '初诊医生',
          //   prop: 'firstDoctor',
          // },
          // {
          //   label: '申请时间',
          //   prop: 'createAt',
          //   width: 200,
          // },
          // {
          //   label: '诊断类型',
          //   prop: 'consultation',
          // },
          {
            label: '标本名称',
            prop: 'specimenName',
            width: 100
          },
          {
            label: '标本类别',
            prop: 'specimenTypeName',
            width: 100
          },
          {
            label: '病人类别',
            prop: 'patientCategoryName',
            width: 100
          },
          {
            label: '送检医生电话',
            prop: 'sendDoctorTel',
            width: 120
          },
          {
            label: '病人电话',
            prop: 'patientPhone',
            width: 100
          },
          {
            label: '收藏备注',
            prop: 'remark'
          }
        ],
        operation: [
          {
            label: '详情',
            functionKey: 'checkDetail'
          },
          {
            label: '报告',
            functionKey: 'previewReport'
          },
          {
            label: '取消收藏',
            functionKey: 'cancelCollect'
          }
        ],
        pageInfo: {
          hide: false,
          page: 1,
          size: 15,
          total: 0
        }
      },
      detailVisible: false,
      organDict: [],
      specimenCategoryList: []
    };
  },
  mounted() {
    this.appAllDataRequest();
    this.getExamineOrganType();
    this.dictionariesRequest();
  },
  methods: {
    async dictionariesRequest() {
      this.$axios({
        method: 'GET',
        url: '/PROXY-Remote/dicts/list',
        params: {
          code: 'specimenCategory',
          page: 0,
          size: 99
        }
      }).then(res => {
        if (res && res.data.code === 200) {
          this.specimenCategoryList = _.clone(res.data.data);
        }
      });
    },
    async getExamineOrganType() {
      try {
        await this.$axios({
          method: 'get',
          url: '/PROXY-Remote/organs/listAllOrgans'
        }).then(res => {
          if (res && res.data.code === 200) {
            res.data.data.forEach(element => {
              this.organDict.push({
                dicName: element.name,
                dicCode: element.id
              });
            });
          }
        });
      } catch (e) {
        console.log(`请求失败  ${e}`);
      }
    },
    async appAllDataRequest() {
      try {
        this.filterForm.page = this.appAllTable.pageInfo.page;
        console.log('filterForm', this.filterForm);
        await this.$axios({
          // 详见 axios 请求配置项
          method: 'POST',
          url: '/PROXY-Remote/diagnosis/myFavorite',
          data: this.filterForm
        }).then(res => {
          // 请求失败
          if (res.data.code !== 200) {
            throw new Error(res.data);
          }
          this.loading = false;
          // 请求成功
          const result = res.data;
          console.log('result', result);
          this.appAllTable.pageInfo = result.pageInfo;
          this.appAllTable.data = result.data;

          for (let i = 0; i < this.appAllTable.data.length; i++) {
            this.appAllTable.data[i].biopsyCount = this.appAllTable.data[
              i
            ].biopsyList.length;
          }
        });
      } catch (e) {
        // 跳出
      }
    },
    async cancelCollection(id) {
      console.log('cancelCollection-id', id);
      try {
        await this.$axios({
          // 详见 axios 请求配置项
          method: 'DELETE',
          url: `/PROXY-Remote/collections/${id}`
        }).then(res => {
          // 请求失败
          if (res.data.code !== 200) {
            throw new Error(res.data);
          }

          // 请求成功
          this.$message.success('取消收藏成功');
          this.appAllDataRequest();
        });
      } catch (e) {
        // 跳出
      }
    },
    toggleExpansion() {
      this.showExpansion = !this.showExpansion;
    },
    search() {
      this.loading = true;
      this.appAllDataRequest();
    },
    appAllTablePageJumpTo(val) {
      this.filterForm.page = val - 1;
      this.appAllDataRequest();
    },
    // 每页显示数量改变
    appAllTableSizeChange(val) {
      this.filterForm.size = val;
      // this.appAllTable.pageInfo.page = 1;
      this.appAllDataRequest();
    },
    rolesTableButtonClick(functionKey, row) {
      // console.log('this[functionKey](row);', functionKey, row);
      this[functionKey](row);
    },
    checkDetail(row) {
      let commitValue = {
        id: row.id,
        pathologyId: row.pathologyId,
        pDiagnosisType: ''
      };
      this.$store.commit('setPropertyGeneral', {
        key: 'diagnosis',
        value: commitValue
      });
      this.normalDetailDialog.pathologyId = row.pathologyId;
      this.normalDetailDialog.visible = true;
    },
    previewReport(row) {
      console.log('row-previewReport', row);
      const { state } = this.$store;
      const userId = state.user.id;
      window.open(`/detail/preview/${userId}/${row.pathologyId}`, '_blank');
    },
    cancelCollect(row) {
      console.log('row-cancelCollect', row);
      this.cancelCollection(row.collectionId);
    },
    detailClose() {
      this.detailVisible = false;
    }
  }
};
</script>

<style scoped>
.expansion {
  width: 30px;
  height: 30px;
  display: inline;
  font-size: 28px;
  line-height: 30px;
  margin-top: 25px;
  vertical-align: middle;
  color: #10a1df;
  cursor: pointer;
}
</style>
